<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="watch-example">
        <p>
            提出一个问题，回答 yes or no
            <input v-model="question">
        </p>
        <!-- 提示语 -->
        <p>{{ answer }}</p>
    </div>
    <script src=".../assets/vue2.js"></script>
    <script src="../assets/axios.1.3.6.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script> -->
    <script>
        var watchExampleVM = new Vue({
            el: '#watch-example',
            data: {
                question: '',
                answer: '提出一个问题，以英文的问号结尾'
            },
            watch: {
                // 如果 `question` 发生改变，这个函数就会运行
                question: function (newQuestion, oldQuestion) {
                    this.answer = '稍等，我去问下，不要打字了哈~';
                    this.getAnswer();
                }
            },
            methods: {
                getAnswer: function () {
                    if (this.question.indexOf('?') == -1) {
                        this.answer = '请在最后加一个英文的?';
                        return
                    }
                    this.answer = '思考ing...'
                    console.log(this);
                    var vm = this;
                    // axios里面的this就不是vm了
                    axios.get('https://yesno.wtf/api')
                        .then(function (response) {
                            console.log(response.data)
                            console.log(this);
                            vm.answer = response.data.answer;
                        })
                        .catch(function (error) {
                            vm.answer = '没法访问API，错误信息：' + error;
                        })
                }
            }
        })
    </script>
</body>

</html>